<!--
 * @Author: jhw
 * @Date: 2025-08-05 10:22:40
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-22 16:45:18
 * @Description:
-->
<template>
  <div
    :class="{
      'text-center': computedStatus.position,
    }"
  >
    <!-- <MaterialsHeader
      :title="computedStatus.title"
      :serialNum="serialNum"
      :desc="computedStatus.desc"
      :titleSize="computedStatus.titleSize"
      :descSize="computedStatus.descSize"
      :titleWeight="computedStatus.titleWeight"
      :descWeight="computedStatus.descWeight"
      :titleItalic="computedStatus.titleItalic"
      :descItalic="computedStatus.descItalic"
    /> -->
    <MaterialsHeader :serialNum="serialNum" v-bind="computedStatus" />
    <div class="radio-group">
      <el-radio-group v-model="radioValue" @click.stop @change="emitAnswer">
        <el-radio v-for="item in computedStatus.options" :key="item" :value="item">{{
          item
        }}</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import MaterialsHeader from '@/components/SurveyComs/Common/MaterialsHeader.vue';
import type { OptionsStatus } from '@/types';
import { SurveyComNameEnum } from '@/types';
import {
  getCurrentStatus,
  getStringStatus,
  getStringStatusByCurrentStatus,
  getTextStatus,
} from '@/utils';
import { computed, ref } from 'vue';

const emit = defineEmits(['updateAnswer']);
const radioValue = ref('');

const props = defineProps<{
  componentId: string;
  status: OptionsStatus;
  serialNum: number;
}>();

const computedStatus = computed(() => ({
  title: getTextStatus(props.status.title),
  desc: getTextStatus(props.status.desc),
  options: getStringStatus(props.status.options),
  isRequire: getCurrentStatus(props.status.isRequire!),
  position: getCurrentStatus(props.status.position),
  titleSize: getStringStatusByCurrentStatus(props.status.titleSize),
  descSize: getStringStatusByCurrentStatus(props.status.descSize),
  titleWeight: getCurrentStatus(props.status.titleWeight),
  descWeight: getCurrentStatus(props.status.descWeight),
  titleItalic: getCurrentStatus(props.status.titleItalic),
  descItalic: getCurrentStatus(props.status.descItalic),
  titleColor: getTextStatus(props.status.titleColor),
  descColor: getTextStatus(props.status.descColor),
}));

const emitAnswer = () => {
  emit('updateAnswer', {
    serialNum: props.serialNum,
    title: computedStatus.value.title,
    answer: radioValue.value,
    type: SurveyComNameEnum.singlePicSelect,
    componentId: props.componentId,
  });
};
</script>

<style scoped></style>
